<template>
  <div class="top-right">
    <view-engineering-message
      :order-id="orderId"
      :engineering-id="engineeringId" 
    />
    <stage-extension-apply 
      :contract-id="engineeringDetails.contractId"
      :order-id="orderId"
      :engineering-id="engineeringId" 
      :stage-list="flatIncompleteNodes"
      :actual-begin-time="engineeringDetails.actualBeginTime"
      :actual-end-time="engineeringDetails.actualEndTime"
      @request-success="handleGetengineeringStageList" />
    <contract-extension-apply :contract-id="engineeringDetails.contractId" :order-id="orderId"
      :engineering-id="engineeringId" @request-success="handleGetengineeringStageList" />
  </div>
  <t-collapse >
    <template v-for="(firstLevel, index) in engineeringNodeTree" :key="firstLevel.id">
    <t-collapse-panel :header="firstLevel.stageName" :disabled="calculateDisabled(firstLevel, index)">
      <!-- 第一层内容 -->
      <template #headerRightContent>
        <t-space size="medium" class="header-right-content">
          <div class="header-item">
            <span class="label">施工班组：</span>
            <span class="value" >
              <t-link theme="primary" v-permission="['system:engineering-team-users:query']"
                @click="handleOpenDialog('update', { id: firstLevel.id,teamUserId: firstLevel.teamUserId}, firstLevel)">
                {{ firstLevel.teamUserId ? teamUserNames[firstLevel.teamUserId] : '请选择' }}
              </t-link>
            </span>
          </div>
          <div>
            <div class="header-item">
              <span class="label">开工日期：</span>
              <span class="value">
                <t-link theme="primary" v-permission="['system:engineering-stage:query']"
                  @click="handleOpenDialog('update', { id: firstLevel.id,startTime:firstLevel.startTime,endTime:firstLevel.endTime }, null, false)">
                  {{ firstLevel.startTime ? dayjs(firstLevel.startTime).format('YYYY-MM-DD') : '请选择' }}
                </t-link>
              </span>
            </div>
            <div class="header-item" v-if="stageList?.some(stage => stage.stageId === firstLevel.id)">
              <span class="label">延期开工：</span>
              <span class="value">
                <t-link theme="danger" v-permission="['system:engineering-stage:query']"
                  @click="handleOpenDialog('update', { id: stageList?.find(stage => stage.stageId === firstLevel.id).id,startTime:stageList?.find(stage => stage.stageId === firstLevel.id).startTime,endTime:stageList?.find(stage => stage.stageId === firstLevel.id).endTime }, null, true)">
                  {{ stageList?.find(stage => stage.stageId === firstLevel.id).startTime ? dayjs(stageList?.find(stage => stage.stageId === firstLevel.id).startTime).format('YYYY-MM-DD') : '请选择' }}
                </t-link>
              </span>
            </div>
          </div>
          <div>

         
          <div class="header-item">
            <span class="label">完工日期：</span>
            <span class="value">
              <t-link theme="primary" v-permission="['system:engineering-stage:query']"
                @click="handleOpenDialog('update', { id: firstLevel.id ,startTime:firstLevel.startTime,endTime:firstLevel.endTime}, null, false)">
                {{ firstLevel.endTime ? dayjs(firstLevel.endTime).format('YYYY-MM-DD') : '请选择' }}
              </t-link>
            </span>
          </div>
           <div class="header-item" v-if="stageList?.some(stage => stage.stageId === firstLevel.id)">
              <span class="label">延期完工：</span>
              <span class="value">
                <t-link theme="danger" v-permission="['system:engineering-stage:query']"
                  @click="handleOpenDialog('update', { id: stageList?.find(stage => stage.stageId === firstLevel.id).id,startTime:stageList?.find(stage => stage.stageId === firstLevel.id).startTime,endTime:stageList?.find(stage => stage.stageId === firstLevel.id).endTime }, null, true)">
                  {{ stageList?.find(stage => stage.stageId === firstLevel.id).endTime ? dayjs(stageList?.find(stage => stage.stageId === firstLevel.id).endTime).format('YYYY-MM-DD') : '请选择' }}
                </t-link>

              </span>
            </div>
           </div>
          <div class="header-item">
            <span class="label">施工天数：</span>
            <span class="value" style="width: 28px;">{{ calculateDays(firstLevel.startTime, firstLevel.endTime)
              }}</span>
          </div>
          <div class="header-item">
            <span class="label">延期次数：</span>
            <span class="value" style="width: 28px;">{{ firstLevel.yanQiCount }}</span>
          </div>
          <div class="header-item">
            <span class="label">是否完成：</span>
            <span class="value">
              <t-tag theme="success" variant="light" v-if="firstLevel.completeStatus === '1'">
                <template #icon>
                  <t-icon name="check-circle" />
                </template>
                完成
              </t-tag>
              <t-tag theme="danger" variant="light" v-if="firstLevel.completeStatus === '0'">
                <template #icon>
                  <t-icon name="close-circle" />
                </template>
                未完成
              </t-tag>
            </span>
          </div>
        </t-space>
      </template>


      <!-- 第二层 -->
      <t-collapse>
        <template  v-for="secondLevel in firstLevel.children" :key="secondLevel.id">
        <t-collapse-panel :header="secondLevel.stageName">
          <template #headerRightContent>
            <t-space size="medium" class="header-right-content">
              <div class="header-item">
                <span class="label">开工日期：</span>
                <span class="value">
                  {{ secondLevel.startTime ? dayjs(secondLevel.startTime).format('YYYY-MM-DD') : '' }}
                </span>
              </div>
              <div class="header-item">
                <span class="label">完工日期：</span>
                <span class="value">
                  {{ secondLevel.endTime ? dayjs(secondLevel.endTime).format('YYYY-MM-DD') : '' }}
                </span>
              </div>
              <div class="header-item">
                <span class="label">是否完成：</span>
                <span class="value">
                  <t-tag theme="success" variant="light" v-if="secondLevel.completeStatus === '1'">
                    <template #icon>
                      <t-icon name="check-circle" />
                    </template>
                    完成
                  </t-tag>
                  <t-tag theme="danger" variant="light" v-if="secondLevel.completeStatus === '0'">
                    <template #icon>
                      <t-icon name="close-circle" />
                    </template>
                    未完成
                  </t-tag>
                </span>
              </div>

            </t-space>
          </template>

          <!-- 第三层 -->
          <t-collapse  :expand-icon="false"
            :expand-on-row-click="false">
            <template v-for="thirdLevel in secondLevel.children" :key="thirdLevel.id">
            <t-collapse-panel :header="thirdLevel.stageName">
              <template #headerRightContent>
                <t-space size="medium" class="flex">
                  <div v-if="thirdLevel.completeStatus === '1'">完工日期：{{ thirdLevel.endTime ?
                    dayjs(thirdLevel.endTime).format('YYYY-MM-DD') : '' }}</div>

                  <t-popconfirm content="确认要完成该项吗？" @confirm="handleConfirmComplete(thirdLevel)"
                    v-if="(injectKey === 'engineeringDetails'||engineeringDetails.isNotice) &&!thirdLevel.endTime">
                    <t-button theme="primary" v-permission="['system:engineering-stage:confirm-complete']"
                      variant="outline">
                      确认完成
                    </t-button>
                  </t-popconfirm>
                </t-space>
              </template>
            </t-collapse-panel>
            </template>
          </t-collapse>
        </t-collapse-panel>
        </template>
      </t-collapse>
    </t-collapse-panel>
    </template>
  </t-collapse>
  <t-form 
    style="margin-top: 10px;" 
    ref="formRef" 
    v-if="isInApprove && isAssigneeUser"
    :data="formData" 
   >
    <t-form-item
      label="审批意见"
      name="reason"
      :rules="[{ required: true, message: '请输入审批意见' }]"
    >
      <t-textarea v-model:value="formData.reason" placeholder="请输入审批意见" />
    </t-form-item>
    <t-form-item>
      <t-space>
        <t-button @click="handlePassApprove">通过</t-button>
        <t-button theme="warning" @click="handleRejectApprove">驳回</t-button>
      </t-space>
    </t-form-item>
  </t-form>
  <!-- 自定义对话框 -->
  <custom-dialog ref="customDialogRef" 
    v-slot="{ formData }" 
    :api-map="isTime?isYanqi?engineeringStageTimeTempCRUD:engineeringStageListCRUD:{get:engineeringStageListCRUD.get,update:engineeringStageUpdateTeam}" 
    header="*施工节点"
    :on-before-save-data="handleDialogSaveData" 
    @request-success="handleDialogRequestSuccess"
  >
    <t-form-item label="施工班组" name="teamUserId" :rules="[{ required: true, message: '请选择施工班组' }]" v-if="!isTime">
      <t-select v-model:value="formData.teamUserId" :options="teamUserOptions" :keys="{ label: 'name', value: 'id' }"
        placeholder="请选择施工班组" clearable filterable @clear="formData.teamUserId = null" />
    </t-form-item>
    <t-form-item label="开工时间" name="startTime" :rules="[
      { required: true, message: '请选择开工时间' },
      {
        validator: () => {
          if (!formData.endTime) return true;
          return dayjs(formData.startTime).isBefore(formData.endTime);
        },
        message: '开工时间不能大于完工时间',
      },
    ]" v-if="isTime">
      <t-date-picker allow-input v-model:value="formData.startTime" clearable value-type="time-stamp" placeholder="请选择开工时间"
        style="width: 100%" @change="
          (value) => {
            if (value) {
              value = isYanqi ? value : dayjs(value).format('YYYY-MM-DD 23:59:59');
            }
            formData.startTime = value ? value : undefined;
          }
        " />
    </t-form-item>
    <t-form-item label="完工时间" name="endTime" :rules="[
      { required: true, message: '请选择完工时间' },
      {
        validator: () => {
          if (!formData.startTime) return true;
          return dayjs(formData.endTime).isAfter(formData.startTime);
        },
        message: '完工时间不能小于开工时间',
      },
    ]" v-if="isTime">
      <t-date-picker allow-input v-model:value="formData.endTime" clearable value-type="time-stamp" placeholder="请选择完工时间"
        style="width: 100%" @change="
          (value) => {
            if (value) {
              value = isYanqi ? value : dayjs(value).format('YYYY-MM-DD 23:59:59');
            }
            formData.endTime = value ? value : undefined;
          }
        " />
    </t-form-item>
  </custom-dialog>

  <!-- 自定义对话框 -->
  <custom-dialog ref="customDialogCompleteRef" v-slot="{ formData, readonly }"
    :api-map="{ update: engineeringStageConfirmComplete }" header="编辑节点" @request-success="handleDialogRequestSuccess">
    <t-form-item label="完工时间" name="endTime" :rules="[{ required: true, message: '请选择完工时间' }]">
      <t-date-picker allow-input v-model:value="formData.endTime" clearable disabled value-type="time-stamp" placeholder="请选择完工时间"
        style="width: 100%" @change="
          (value) => {
            if (value) {
              value = dayjs(value).format('YYYY-MM-DD 23:59:59');
            }
            formData.endTime = value ? value : undefined;
          }
        " />
    </t-form-item>
    <t-form-item label="附属图片" name="fileUrl" v-if="formData.uploadStatus == '1'" :rules="[{ required: true, message: '请上传图片' }]">
      <upload v-model:files="formData.fileUrl" accept="image/*" theme="image" :disabled="readonly" multiple/>
    </t-form-item>
    <t-form-item label="备注" name="remark">
      <t-textarea v-model:value="formData.remark" placeholder="请输入备注" :readonly="readonly" />
    </t-form-item>
  </custom-dialog>
  <!-- 粘性审批对话框 -->
  <sticky-approve-dialog ref="stickyApproveDialogRef23" :order-id="orderId" approve-type="23" @request-success="handleGetengineeringStageList" />
  <sticky-approve-dialog ref="stickyApproveDialogRef24" :order-id="orderId" approve-type="24" @request-success="handleGetengineeringStageList"/>
  <!-- 发起人 -->
  <sticky-init-approve-dialog :is-multiple="isMultiple" :style="dialog1Style" ref="stickyInitApproveDialogRef23"
    :order-id="orderId" approve-type="23" />
  <sticky-init-approve-dialog :is-multiple="isMultiple" :style="dialog2Style" ref="stickyInitApproveDialogRef24"
    :order-id="orderId" approve-type="24" />
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { Form, MessagePlugin } from 'tdesign-vue-next';
import { computed, inject, onMounted, Ref, ref, useTemplateRef } from 'vue';

import { engineeringStageListCRUD, engineeringStageConfirmComplete ,engineeringStageUpdateTeam, engineeringStageTimeTempCRUD } from '@/api/project/details';
import { engineeringTeamCRUD } from '@/api/config/common-config';
import CustomDialog from '@/components/custom/dialog/index.vue';
import ContractExtensionApply from './ContractExtensionApply.vue';
import StageExtensionApply from './StageExtensionApply.vue';
import Upload from '@/components/upload/index.vue';
import StickyApproveDialog from '@/pages/approve/components/sticky-approve-dialog .vue';
import StickyInitApproveDialog from '@/pages/approve/components/sticky-init-approve-dialog.vue';
import { useDictionaryStore, useUserStore, usePermissionStore } from '@/store';
import listToTree from '@/utils/listToTree';
import { getProcessInstance, getProcessInstanceIdByOrderIdAndType, getProcessInstanceTaskList, passApprove, rejectApprove } from '@/api/approve/approve';
import ViewEngineeringMessage from './ViewEngineeringMessage.vue';
// 定义 props
const props = defineProps({
  injectKey: {
    type: String,
    default: 'engineeringDetails',
  },
});
// 用户仓库
const userStore = useUserStore();
// 字典仓库
const dictionaryStore = useDictionaryStore();
// 权限
const permissionStore = usePermissionStore();
// 默认的注入键
const injectKey = props.injectKey
// 动态注入数据
const details = inject<Ref<Record<string, any>>>(injectKey);
// 施工详情
const engineeringDetails = details;
const engineeringId = details.value.engineeringId || details.value.id
const orderId = details.value.orderId || details.value.id
// 施工节点
const engineeringNodeTree = ref([])
// 获取施工节点列表
const handleGetengineeringStageList = () => {
  const params = {
    pageSize: -1,
    engineeringId: engineeringId
  }
  engineeringStageListCRUD.page(params).then(data => {
    engineeringNodeTree.value = listToTree(data.list)
    // 初始化施工班组名称
    initializeTeamUserNames(data.list);
  }).catch(({ message }) => {
    MessagePlugin.error(message);
  });
}
// 初始化施工班组名称
const initializeTeamUserNames = (list: any[]) => {
  list.forEach((item) => {
    if (item.teamUserId) {
      getTeamUserName(item.teamUserId, item.engineeringNode);
    }
  });
};
interface DialogRef {
  visible: boolean;
  open: () => void;
  close: () => void;
}
// 粘性审批对话框ref
const stickyApproveDialogRef23 = useTemplateRef('stickyApproveDialogRef23');
const stickyApproveDialogRef24 = useTemplateRef('stickyApproveDialogRef24');
const stickyInitApproveDialogRef24 = ref<DialogRef | null>(null);
const stickyInitApproveDialogRef23 = ref<DialogRef | null>(null);

// 审批数据
const approveData = ref<Record<string, any>>({});
// 是否正在审批--审批人
const isInApprove = computed(() => {
  return approveData.value.designStatus === 1;
});
// 是否审批用户
const isAssigneeUser = computed(() => {
  console.log('isAssigneeUser', approveData.value.assigneeUserId, userStore.userInfo.id);
  return approveData.value.assigneeUserId === userStore.userInfo.id;
});
// 处理获取流程实例
const handleGetProcessInstance = (id: string) => {
  const params = {
    id,
  };
  return getProcessInstance(params)
    .then((data) => {
      approveData.value.designStatus = data.status;
      Object.keys(data.formVariables).forEach((key) => {
        approveData.value[key] = data.formVariables[key];
      });
      console.log(approveData.value,'approveData');
      
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
};
// 流程实例任务列表
const processInstanceTaskList = ref([]);
// 处理获取流程实例任务列表
const handleGetProcessInstanceTaskList = (processInstanceId: string) => {
  const params = {
    processInstanceId,
  };
  return getProcessInstanceTaskList(params)
    .then((data) => {
      processInstanceTaskList.value = data;
      data.forEach((item:any) => {
        if (item.assigneeUser?.id === userStore.userInfo.id&&item.status=='1') {
          approveData.value.taskId = item.id;
          approveData.value.assigneeUserId = item.assigneeUser.id;
          approveData.value.status = item.status;
        }
      });
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
};
// 处理获取审批数据
const handleGetApproveData = async () => {
  console.log(details.value,'de');
  
  const params = {
    orderId: details.value.orderId || details.value.id,
    type: '23',
  };
  try {
    const data = await getProcessInstanceIdByOrderIdAndType(params);
    const processInstanceId = data[0];
    console.log(processInstanceId,'id122222222kkkkkkkk');
    console.log(orderId.value,'orderId.value');
    
    if (processInstanceId) {
      console.log(data);
      await handleGetProcessInstance(processInstanceId);
      await handleGetProcessInstanceTaskList(processInstanceId);
      
    }
  } catch (error) {
    MessagePlugin.error(error);
  } finally {
    
  }
};
// 加载提交
const loadingSubmit = ref(false);
// 表单ref
const formRef = useTemplateRef<typeof Form>('formRef');
// 表单数据
const formData = ref<Record<string, any>>({});
// 处理拒绝审批
const handleRejectApprove = async () => {
  const validateResult = await formRef.value.validate();
  if (validateResult !== true) return;
  loadingSubmit.value = true;
  const params = {
    id: approveData.value.taskId,
    reason: formData.value.reason,
  };
  rejectApprove(params)
    .then(() => {
      MessagePlugin.success('操作成功');

      handleGetApproveData();
      handleGetStageApprove();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
    .finally(() => {
      loadingSubmit.value = false;
    });
};
// 处理通过审批
const handlePassApprove = async () => {
  const validateResult = await formRef.value.validate();
  if (validateResult !== true) return;
  loadingSubmit.value = true;
  const params = {
    id: approveData.value.taskId,
    reason: formData.value.reason,
    delayTime: formData.value.delayTime,
  };
  passApprove(params)
    .then(() => {
      MessagePlugin.success('操作成功');
      
      handleGetApproveData();
      handleGetStageApprove();
     
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
    .finally(() => {
      loadingSubmit.value = false;
    });
};
const stageList = ref([])
// 施工节点延期
const handleGetStageApprove = () => {
   const params = {
    pageSize: -1,
    engineeringId: engineeringId
  }
  engineeringStageTimeTempCRUD.page(params).then(data => {
    stageList.value = data.list
    
    // 初始化施工班组名称
    initializeTeamUserNames(data.list);
  }).catch(({ message }) => {
    MessagePlugin.error(message);
  });
}
onMounted(() => {
  handleGetengineeringStageList();
  const { approveType } = engineeringDetails.value;
  if (approveType === '23') {
    handleGetStageApprove();
    handleGetApproveData();
  }
  if (approveType === '24') stickyApproveDialogRef24.value.open();
  stickyInitApproveDialogRef23.value.open();
  stickyInitApproveDialogRef24.value.open();
});
// 判断是否同时显示多个对话框
const isMultiple = computed<boolean>(() => {
  console.log(stickyInitApproveDialogRef24.value?.visible, '11');
  console.log(stickyInitApproveDialogRef23.value?.visible, '5');

  return stickyInitApproveDialogRef24.value?.visible && stickyInitApproveDialogRef23.value?.visible;
});

// 第一个对话框的样式
const dialog1Style = computed(() => {
  if (isMultiple.value) {
    return { left: '40%' }; // 多个对话框时，第一个对话框靠左
  }
  return {}; // 单个对话框时，样式不变
});

// 第二个对话框的样式
const dialog2Style = computed(() => {
  if (isMultiple.value) {
    return { left: '60%' }; // 多个对话框时，第二个对话框靠右
  }
  return {}; // 单个对话框时，样式不变
});
// 计算施工天数
const calculateDays = (startTime: any, endTime: any) => {
  if (!startTime || !endTime) return 0;

  const start = new Date(startTime).getTime();
  const end = new Date(endTime).getTime();

  if (start > end) {
    // console.warn('startTime 不能晚于 endTime');
    return 0;
  }

  const timeDiff = end - start;
  return Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
};
// 计算属性：获取所有顶层未完成节点的扁平化列表
const flatIncompleteNodes = computed(() => {
  return engineeringNodeTree.value
    .filter(node => node.completeStatus === '0')
    .map(node => ({
      id: node.id,
      stageName: node.stageName,
      endTime: node.endTime,
      startTime: node.startTime
    }))
})
// 施工班组名称映射表
const teamUserNames = ref<Record<string, string>>({});
// 获取施工班组名称
const getTeamUserName = (teamUserId: string, engineeringNode: string) => {
  const params = {
    pageSize: -1,
    jobType: engineeringNode,
    companyId: engineeringDetails.value.companyId,
  };
  engineeringTeamCRUD.page(params).then((data) => {
    const teamUserObj = data.list.find((o: any) => o.id === teamUserId);
    if (teamUserObj) {
      // 将施工班组名称存储到映射表中
      teamUserNames.value[teamUserId] = teamUserObj.name;
    }
  }).catch(({ message }) => {
    MessagePlugin.error(message);
  });
};
const getTeamUserOptionList = (engineeringNode: string | Number) => {

  const params = {
    pageSize: -1,
    jobType: engineeringNode,
    companyId: engineeringDetails.value.companyId
  }
  engineeringTeamCRUD.page(params).then(data => {
    teamUserOptions.value = data.list
  }).catch(({ message }) => {
    MessagePlugin.error(message);
  });

}
// 施工班组option
const teamUserOptions = ref([])
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
const isTime = ref(true)
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>, item?: Record<string, any>,yanqi?: boolean) => {
  if (item) {
    getTeamUserOptionList(item.engineeringNode);
    isTime.value = false
  } else {
    isYanqi.value = yanqi
    console.log(permissionStore.permissions.includes('system:engineering-stage:always-config-node-date'),'all');
    console.log(permissionStore.permissions.includes('system:engineering-stage:noConfig-config-node-date'),'only');
    // 全配置
    if(permissionStore.permissions.includes('system:engineering-stage:always-config-node-date')) {
      isTime.value = true
      customDialogRef.value.open(mode, params);
      return;
    }
    // 未配置的时候配置
    if(permissionStore.permissions.includes('system:engineering-stage:noConfig-config-node-date')) {     
       
      if(params.startTime&&params.endTime)  {  
        return; 
      }
    }
    isTime.value = true
    if(!permissionStore.permissions.includes('system:engineering-stage:always-config-node-date')&&!permissionStore.permissions.includes('system:engineering-stage:noConfig-config-node-date')) {
      return;
    }

  }
  customDialogRef.value.open(mode, params);
};
const isYanqi = ref(false)
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  if (result.mode === 'update') {
    handleGetengineeringStageList();
    if(isYanqi.value) {
      handleGetStageApprove()
    }
  }
};
// 处理对话框保存数据
const handleDialogSaveData = (params: Record<string, any>) => {
  if (params.fileUrl) {
    delete params.fileUrl
  }
};
// 自定义确认完成对话框ref
const customDialogCompleteRef = useTemplateRef('customDialogCompleteRef');
// 处理确认完成
const handleConfirmComplete = (row: Record<string, any>) => {
  const endTime = dayjs(new Date()).format('YYYY-MM-DD 23:59:59');
  if (row.fileUrl) {
      delete row.fileUrl
    }
    row.fileUrl = []
    console.log(row,'row');
    
  customDialogCompleteRef.value.open('update', {...row, endTime});

}
// 计算 disabled 状态
const calculateDisabled = (node: any, index: number) => {
  node.disabled = false
  // 第一个节点，不禁用
  if (index !== 0) {
    const prevNode = engineeringNodeTree.value[index - 1];
    // 如果 isParallel 为 1，则与上一个节点保持一致
    if (node.isParallel === '1') {
      node.disabled = prevNode.disabled
    } else {
      // 否则，根据上一个节点的完成状态决定
      if (prevNode.completeStatus === '0') {
        node.disabled = true
      }
    }
  }
  return node.disabled;
};
// 申请阶段延期
const handleStageExtensionApply = () => {
  // const params = {
  //   orderId,
  //   engineeringId,
  //   contractId: engineeringDetails.value.contractId,
  //   stageList:engineeringNodeTree.value
  // }
  // console.log(engineeringNodeTree.value,'stage');

}
// 申请合同延期
const handleContractExtensionApply = () => {

}
</script>

<style lang="less" scoped>
.top-right {
  width: 100%;
  text-align: right;
  margin-bottom: 10px;
}

.header-right-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;

  .header-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: normal;
    // flex: 1;

    .label {
      margin-right: 4px;
      // flex-shrink: 0;
    }

    .value {
      display: inline-flex;
      align-items: center;
      width: 70px;
      // flex: 1;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
  font-weight: normal;
}
</style>